<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>快环境</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <link rel="stylesheet" href="dist/css/bootstrap-table.css">
  <link rel="stylesheet" type="text/css" href="dist/img/font/iconfont.css"/>
  <link rel="stylesheet" href="dist/css/indexPage.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
  <header class="main-header navbar navbar-expand bg navbar-light border-bottom fixed-top">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa "><img src="dist/img/icon/more.png" style="width: 30px;"/></i></a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <form class="form-inline ml-3 fobg">
        <div class="input-group input-group-sm">
          <input class="form-control form-control-navbar border-right" type="search" placeholder="搜索" aria-label="Search">
          <div class="input-group-append">
          <button class="btn btn-navbar" type="submit">
            <i class="fa serh"><img src="dist/img/icon/search.png"/></i>
          </button>
          </div>
        </div>
      </form>
      <li class="nav-item ">
        <a class="nav-link qq" data-widget="control-sidebar" data-slide="true" href="#"><i class="fa "><img src="dist/img/icon/duoyuyan.png" style="width: 25px;"/></i></a>
      </li>
    </ul>
  </header>
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <a href="#" class="brand-link">
      <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
      <span class="brand-text font-weight-light">快环境</span>
    </a>
    <div class="sidebar">
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <li class="nav-item">
            <a href="#homePage" class="nav-link active show" data-toggle="tab">
              <i class="nav-icon fa"><img src="dist/img/icon/shouye.png"/></i>
              <p>首&nbsp;&nbsp;&nbsp;&nbsp;页</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#fileManagement" class="nav-link" data-toggle="tab">
              <i class="nav-icon fa"><img src="dist/img/icon/wenjianguanli.png"/></i>
              <p>文件管理</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#dataBase" class="nav-link" data-toggle="tab">
              <i class="nav-icon fa"><img src="dist/img/icon/shujuku.png" style="width: 18px;"/></i>
              <p>数据库</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#monitor" class="nav-link" data-toggle="tab">
              <i class="nav-icon fa"><img src="dist/img/icon/jiankong.png"/></i>
              <p>监&nbsp;&nbsp;&nbsp;&nbsp;控</p>
            </a>
          </li>
          <li class="nav-item active">
            <a href="#cpuMonitor" class="nav-link" data-toggle="tab">
              <i class="nav-icon fa"><img src="dist/img/icon/CPUchuliqi.png"/></i>
              <p>CPU监控</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#memoryMonitoring" class="nav-link" data-toggle="tab">
              <i class="nav-icon fa"><img src="dist/img/icon/neicuntiao.png"/></i>
              <p>内存监控</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#disIoMonitor" class="nav-link" data-toggle="tab">
              <i class="nav-icon fa"><img src="dist/img/icon/cipan.png"/></i>
              <p>磁盘io监控</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#networkMonitor" class="nav-link" data-toggle="tab">
              <i class="nav-icon fa"><img src="dist/img/icon/wangluo.png"/></i>
              <p>网络监控</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#oneClickPlacementWebsite" class="nav-link" data-toggle="tab">
              <i class="nav-icon fa"><img src="dist/img/icon/yijianfangzhi.png"/></i>
              <p>一键放置网站</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#recycleBin" class="nav-link" data-toggle="tab">
              <i class="nav-icon fa"><img src="dist/img/icon/huishouzhan.png"/></i>
              <p>回收站</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#signOut" class="nav-link" data-toggle="tab">
              <i class="nav-icon fa"><img src="dist/img/icon/tuichu.png"/></i>
              <p>退&nbsp;&nbsp;&nbsp;&nbsp;出</p>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </aside>
  <div class="content-wrapper tab-content">
    <div class="content tab-pane fade in active show" id="homePage">
      <div class="row">
        <div class="col-sm-6 col-md-3 mt-2">
          <button class="btn btn-block btn-default" id="addBtn">添加站点</button>
        </div>
        <div class="col-sm-6 col-md-3 mt-2">
          <button class="btn btn-block btn-default" id="delBtn">删除站点</button>
        </div>
        <div class="col-sm-6 col-md-3 mt-2">
          <button class="btn btn-block btn-default" id="updateBtn">更新配置</button>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <table id="hostList">
            <thead>
            <tr>
              <th data-field="state" data-checkbox="true"></th>
              <th data-field="file_name">配置文件名</th>
              <th data-field="remark">备注</th>
              <th data-field="root">网络目录</th>
              <th data-field="server_name">域名</th>
              <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">操作</th>
            </tr>
            </thead>
          </table>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6 col-md-4">
          <div id="chartBox-cpuMon" style="height:10rem;width: 24rem;margin-left: 5%;position: relative">
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div id="chartBox-MemoryMon" style="height:10rem;width:24rem;position: relative">
        </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div id="chartBox-diskIoMon" style="height: 10rem; width: 24rem;position: relative">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="position: relative">
          <div id="chartBox-networkIoMon" style="height: 300px; width: 100rem;position: absolute"></div>

        </div>
      </div>
    </div>
    <div class="content tab-pane fade" id="fileManagement">
      <div class="fileM_box">
        <div class="fileM_header">
          <button class="btn btn-default" title="后退"><img src="dist/img/rollback.png" alt="" width="20" height="20"></button>
          <button class="btn btn-default" title="前进"><img src="dist/img/arrowright.png" alt="" width="20" height="20"></button>
          <button class="btn btn-default" title="主目录"><img src="dist/img/zhuye.png" alt="" width="20" height="20"></button>
          <div class="file_directory" contenteditable="true"></div>
        </div>
        <div class="fileM_content">
          <div class="file_item">
            <a href="javascript:" id="upload_file" class="upload_file">
            	<i class="iconfont icon-tianjia"></i>
              <input type="file" name="filename">
            </a>
          </div>
          <ul class="context-menu none">
            <li class="context-menu-item">
              <i class="iconfont icon-fuzhi"></i><span>复制</span>
            </li>
            <li  class="context-menu-item">
              <i class="iconfont icon-jianqie"></i><span>剪切</span>
            </li>
            <li class="context-menu-item">
              <i class="iconfont icon-niantie"></i><span>粘贴</span>
            </li>
            <li class="context-menu-item">
              <i class="iconfont icon-xinwenjianjia"></i><span>新建文件夹</span>
            </li>
            <li class="context-menu-item">
              <i class="iconfont icon-xinjianwenjian"></i><span>新建文件</span>
            </li>
            <li class="context-menu-item">
              <i class="iconfont icon-yasuobao"></i><span>压缩</span>
            </li>
            <li class="context-menu-item">
              <i class="iconfont icon-shuju"></i><span>解压</span>
            </li>
            <li class="context-menu-item">
              <i class="iconfont icon-zhongmingming"></i><span>重命名</span>
            </li>
            <li class="context-menu-item">
              <i class="iconfont icon-tishi"></i><span>属性</span>
            </li>
            <li class="context-menu-item">
              <i class="iconfont icon-xiazai"></i><span>下载</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content tab-pane fade" id="dataBase">
      <iframe id="iframe-dataBase"></iframe>
    </div>
    <div class="content tab-pane fade" id="monitor">
      <div class="container">
        <div class="row">
          <div class="col-md-12 tab_overflow">
            <table class="table" id="tab-monitor">
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="content tab-pane fade" id="cpuMonitor">
      <div class="container">
        <div class="row">
          <div class="col-md-12 tab_overflow">
            <table class="table" id="tab-cpuMonitor">
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="content tab-pane fade" id="memoryMonitoring">
      <div class="container">
        <div class="row">
          <div class="col-md-12 tab_overflow">
            <table class="table" id="tab-memoryMonitoring">
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="content tab-pane fade" id="disIoMonitor">
      <div class="container">
        <div class="row">
          <div class="col-md-12 tab_overflow">
            <table class="table" id="tab-disIoMonitor">
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="content tab-pane fade" id="networkMonitor">
      <div class="container">
        <div class="row">
          <div class="col-md-12 tab_overflow">
            <table class="table" id="tab-networkMonitor">
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="content tab-pane fade" id="oneClickPlacementWebsite"></div>
    <div class="content tab-pane fade" id="recycleBin"></div>
    <div class="content tab-pane fade" id="signOut"></div>
  </div>
</div>
</body>
</html>
<script src="plugins/jquery/jquery-3.3.1.js"></script>
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="dist/js/adminlte.js"></script>
<script src="dist/js/demo.js"></script>
<script src="dist/js/plugins/bootstrap/js/bootstrap-table.js"></script>
<script src="dist/js/plugins/bootstrap/js/bootstrap-table-zh-CN.js"></script>
<script src="plugins/echarts/echarts.js"></script>
<script src="dist/js/pages/indexPage.js"></script>
